<template>
  <div>
    <div style="width: 100%;height: 1500px;">
      <div>
        <div>
          <span>研发申请</span>
          <span style="margin-left: 80%;"><el-button type="primary"
              @click="addresearch1(projectName, urgencyLevel, researchDevelopment, rdCost, estimatedHeadCount, rdCity, detaile, rdStage, rdType,)">提交</el-button></span>
          <span style=""><el-button type="primary">保存</el-button></span>
        </div>
        <div>
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <!-- 研发申请 -->
              <el-tab-pane label="研发申请" name="first">
                <div class="biao">
                  <div class="biao1">
                    <span class="biao2"> 研发申请</span>
                    <div style="margin-left: 2%;">基本信息</div>
                    <div style="display: flex; width: 85%; justify-content: space-around ; margin: auto;">
                      <div class="biao3">
                        <div style="margin-top:10px;">
                          <div>项目名称</div>
                          <el-input v-model="projectName"></el-input>
                        </div>
                      </div>
                      <div class="biao3">

                        <div style="margin-top:10px;">
                          <div>紧急程度</div>
                          <el-input v-model="urgencyLevel"></el-input>
                          <!-- <div
                            style="border: 1px solid rgb(220, 223, 230); background-color: rgb(255, 255, 255); height: 40px;">
                            <template>
                              <el-radio-group v-model="urgencyLevel" style="margin-top: 10px;">
                                <el-radio :label="3">正常</el-radio>
                                <el-radio :label="6">重要</el-radio>
                                <el-radio :label="9">紧急</el-radio>
                              </el-radio-group>
                            </template>
</div> -->
                        </div>
                      </div>
                      <div class="biao3">
                        <div style="margin-top: 10px;">
                          <div>研发日期 </div>
                          <div class="block">
                            <el-date-picker v-model="researchDevelopment" type="date" placeholder="选择日期">
                            </el-date-picker>
                          </div>
                          <div class="block"></div>
                          <!-- <el-input v-model="researchDevelopment"></el-input> -->
                          <!-- <div>
                            <template>
                              <div class="block">
                                <el-date-picker v-model="researchDevelopment" type="datetime" placeholder="选择日期时间">
                                </el-date-picker>
                              </div>
                            </template>
                          </div> -->
                        </div>
                      </div>
                    </div>
                    <div style="width: 85%; height: 800px; margin: auto; margin-top: 20px;">
                      <div style="display: flex;flex-wrap: wrap;justify-content: space-around ;">
                        <div class="biao4">
                          <div>研发成本总计</div>
                          <el-input v-model="rdCost"></el-input>
                        </div>
                        <div class="biao4">
                          <div>预计人数</div>
                          <el-input v-model="estimatedHeadCount"></el-input>
                        </div>
                        <div class="biao4">
                          <div>研发城市</div>
                          <el-input v-model="rdCity"></el-input>
                          <!-- <el-cascader :options="options" style="width: 100%;" v-model="rdcity">
                            <template slot-scope="{ node, data }">
                              <span>{{ data.label }}</span>
                              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                            </template>
                          </el-cascader> -->
                        </div>
                        <div class="biao4">
                          <div>详细地址</div>
                          <el-input v-model="detailedAddress"></el-input>
                        </div>
                        <div class="biao4">
                          <div>研发阶段</div>
                          <el-input v-model="rdStage"></el-input>
                          <!-- <el-select v-model="rdStage" placeholder="请选择活动阶段" style="width: 100%;">
                            <el-option label="审批阶段" value="shanghai"></el-option>
                            <el-option label="筹备阶段" value="beijing"></el-option>
                            <el-option label="立顶阶段" value="shanghai"></el-option>
                            <el-option label="执行阶段" value="beijing"></el-option>
                          </el-select> -->
                        </div>
                        <div class="biao4">
                          <div>研发类型</div>
                          <el-input v-model="rdType"></el-input>
                        </div>

                      </div>
                      <!-- <div class="biao5">
                        <div>费用信息</div>
                        <div>
                          <div
                            style="background-color: blue; width:90% ; height: 150px; margin: auto; margin-top: 20px;">
                            <el-table :data="tableData" height="250" border style="width: 100%">
                              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
                              <el-table-column prop="date" label="序号" width=""></el-table-column>
                              <el-table-column prop="name" label="费用名称" width=""></el-table-column>
                              <el-table-column prop="address" label="费用小计"></el-table-column>
                              <el-table-column prop="beizhu" label="备注"></el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div> -->
                      <!-- <div>描述</div>
                      <div style="margin: auto;">
                        <tinymce :width="595" :height="300" v-model="rdType" :key="tinymceFlag">
                        </tinymce>
                      </div> -->
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 流程图 -->
              <el-tab-pane label="流程图" name="second">
                <el-steps :active="active" finish-status="success">
                  <el-step title="创建"></el-step>
                  <el-step title="上级审批"></el-step>
                  <el-step title="归档"></el-step>
                </el-steps>
                <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
              </el-tab-pane>
              <!-- 流程状态 -->
              <el-tab-pane label="流程状态" name="third">
                <div class="tai">
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </div>
      <!-- <div style="background-color: black;"></div> -->
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { addresearch } from "../../../api/research"
// 流程表单
import Tinymce from "@/components/Tinymce";
const defaultEditForm = {
  id: null,
  name: null,
  introductionThe: null,
  createTime: null,
  updateTime: null,
};
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  isAsc: false,
  orderByField: "create_time",
};
export default {
  components: { Tinymce },
  data() {
    return {
      // 添加
      // 项目类型
      projectName: null,
      // 紧急程度
      urgencyLevel: null,
      // 研发日期
      researchDevelopment: null,
      //研发成本总计
      rdCost: 0,
      //预计人数
      estimatedHeadCount: null,
      //研发掖市
      rdCity: null,
      //详细地址
      detailedAddress: null,
      //研发阶段
      rdStage: null,
      // 研发类型
      rdType: null,


      // 流程图
      active: 0,
      value: "",
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      total: "",
      tinymceFlag: 1,
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      listData: [], //数据
      list: Object.assign({}, defaultListQuery),
      activeName: 'first',
      sizeForm: {
        name: '',
        name1: '',
        name2: '',
        name3: '',
        name4: '',
      },
      radio: 3,
      value1: '',
      options: [{
        value: 'zhinan',
        label: '山西',
        children: [{
          value: 'shejiyuanze',
          label: '吕梁',
          children: [{
            value: 'yizhi',
            label: '孝义'
          }, {
            value: 'fankui',
            label: '汾阳'
          }, {
            value: 'xiaolv',
            label: '柳林'
          }, {
            value: 'kekong',
            label: '临县'
          }]
        }, {
          value: 'daohang',
          label: '太原',
          children: [{
            value: 'cexiangdaohang',
            label: '杏花岭'
          }, {
            value: 'dingbudaohang',
            label: '小店'
          }, {
            value: 'dingbudaohang',
            label: '万柏林'
          }]
        }]
      }, {
      }],
      form: {
        region: '',
        region1: '',
        date: ''
      },
      tableData: [{
        date: '1',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '2',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '3',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '4',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '5',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '6',
        name: '王小虎',
        address: '',
        beizhu: ''
      }, {
        date: '7',
        name: '王小虎',
        address: '',
      }],
    };
  },
  methods: {
    addresearch1() {
      const addresearch2 = {
        //项目名称
        projectName: this.projectName,
        // 紧急程度
        urgencyLevel: this.urgencyLevel,
        // 研发日期
        researchDevelopment: moment(this.researchDevelopment).format('YYYY-MM-DD'),
        //研发成本总计
        rdCost: this.rdCost,
        //预计人数
        estimatedHeadCount: this.estimatedHeadCount,
        //研发掖市
        rdCity: this.rdCity,
        //详细地址
        detailedAddress: this.detailedAddress,
        //研发阶段
        rdStage: this.rdStage,
        // 研发进度
        rdType: this.rdType,
      }
      console.log(addresearch2);
      addresearch(addresearch2).then(res => {
        console.log(res);
        if(res.code==200){
          this.$router.push({path: '/charts/src.assets/register'})
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }


      })

    },
    // 图标
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    // 申请
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log('submit!');
    }
  },
  beforeDestroy() {
    // 销毁组件前销毁编辑器
    this.tinymce && this.tinymce.destroy();
  },

};
</script>

<style scoped>
/* 流程表单 */
.biao {
  width: 100%;
  height: 1300px;
  Background-color: #f5f5f5;
}

.biao1 {
  margin-left: 20px;
  margin: auto;
  width: 80%;
  height: 100%;
  background-color: #ffffff;
}

.biao2 {
  font-size: 30px;
  margin-left: 45%;
}

.biao3 {
  width: 30%;
  height: 80px;
  background-color: #ffffff;
}

.biao4 {
  width: 30%;
  margin-top: 40px;
  height: 80px;
}

.biao5 {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 20pc;
}


/* 流程状态 */
</style>
